<template>
  <div id="management-home">
    <div class="container">
      <el-menu
        class="el-menu"
        mode="horizontal"
        :default-active="activeRouteName"
        @select="handleMenuSelect"
      >
        <el-button
          icon="el-icon-s-home"
          style="float: right;margin-top: 12px;"
          type="primary"
          @click="$router.push({name: 'home'})"
        >回到首页
        </el-button>
        <el-menu-item index="management-car">车辆管理</el-menu-item>
        <el-menu-item index="management-vpm">车队管理</el-menu-item>
        <el-menu-item index="management-navigation-task">导航任务管理</el-menu-item>
      </el-menu>
      <div class="router-view-container">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManagementHome",

  data() {
    return {
      activeRouteName: this.$route.name || ''
    }
  },

  methods: {
    handleMenuSelect(data) {
      this.$router.push({name: data})
    }
  }
}
</script>

<style scoped lang="scss">
#management-home {
  .container {
    padding: 12px 24px;

    .el-menu {
      user-select: none;
    }
  }
}
</style>